<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- HTML5 web 存储,一个比cookie更好的本地存储方式 -->
    <!-- 使用HTML5可以在本地存储用户的浏览数据。

早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的[安全]与[快速]. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.

数据以 键/值 对存在, web网页的数据只允许该网页访问使用。 -->

    <!-- [安全] cookie 会自动发送 -->
    <!-- 数据以 键/值 对存在 cookie字符串 -->
    <!-- cookie 4kb大小 -->

    <script>
      document.cookie = "name=nick";
      document.cookie = "age=17";

      console.log(document.cookie);

      //   console.log(Storage);
      // console.log(localStorage);

      //       保存数据：localStorage.setItem(key,value);
      // 读取数据：localStorage.getItem(key);
      // 删除单个数据：localStorage.removeItem(key);
      // 删除所有数据：localStorage.clear();
      // 得到某个索引的key：localStorage.key(index);

      //   设置
      localStorage.name = "nick";
      localStorage.setItem("age", 17);
      localStorage.setItem("bob", "drff");

      //   读取
      console.log(localStorage.name);
      console.log(localStorage.getItem("age"));

      //   localStorage.removeItem('age')
      //   localStorage.clear()

      //   console.log(localStorage.key(1));
      // 顺序不能保证 极少用

      //   cookie 域名+端口【host】 路径 过期时间
      // localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
      //  host 长期

      // sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
      //   标签页区分
    </script>
  </body>
</html>
